/**
 * Created by brickspert on 2016/12/22.
 */
/*通话页面*/
import React, {Component} from 'react';
import {browserHistory} from 'react-router';
import BgImg from '../../components/BgImg/BgImg';
import './Talk.scss';
import {autoPlay} from 'util/audioAutoPlay'

const bgImg = require('../../asset/images/photos/talk-bg.jpg');
const functionImg = require('./images/function.png');
const hungUpImg = require('./images/hung-up.png');
// const name  = '胡琦'

let nameText = name?`亲爱的${name}`:`各位亲朋好友`;
const audioText = `喂,您好,${nameText};我是百度语音助手,胡琦和熊琴将于公历2017年10月1日在老家举办婚礼酒席,诚挚希望您能参加,新郎胡琦、新娘熊琴恭候您的光临，谢谢您的祝愿!地址：娄底市双峰县走马街镇和民村檀树塘!`;
const boyMp3 = `http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&per=4&&spd=5&text=${audioText}`;
// const girlMp3 = require('../../asset/audio/talk-girl.mp3');
const girlMp3 = `http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&per=0&&spd=5&text=${audioText}`;

export default class Talk extends Component {
    constructor(props) {
        super(props);
        this.state = {
            timestamp: Date.parse(new Date()) / 1000
        }
    }

    componentDidMount() {
        this.interval = setInterval(()=> {
            this.setState({
                timestamp: Date.parse(new Date()) / 1000
            });
        }, 1000);
        /*音频延迟0.1秒播放*/
        this.audioTimer = setTimeout(()=> {
            autoPlay('talk-audio');
            document.getElementById('talk-audio').play();
        }, 100);
    }

    componentWillUnmount() {
        this.interval && clearInterval(this.interval);
        this.audioTimer && clearTimeout(this.audioTimer);
    }

    _countDown(timestamp) {
        var endTimestamp = 1506830400;
        if (timestamp == 0 || timestamp >= endTimestamp) {
            return '';
        }
        var time = endTimestamp - timestamp;
        var day = parseInt(time/ 60 / 60 / 24 , 10);
        var hour = parseInt(time/ 60 / 60 % 24 , 10);
        var minute = parseInt(time / 60 % 60, 10);
        var second = parseInt(time % 60, 10);
        function checkTime(i){ //将0-9的数字前面加上0，例1变为01 
            if(i<10) 
            { 
             i = "0" + i; 
            } 
            return i; 
           } 
           day = checkTime(day); 
           hour = checkTime(hour); 
           minute = checkTime(minute); 
           second = checkTime(second); 

        return `${day}天${hour}小时${minute}分${second}秒`;
    }

    _redirectToDesktop() {
        browserHistory.push({
            pathname: '/wedding/desktop'
        });
    }

    render() {
        const countDown = this._countDown(this.state.timestamp);
        return (
            <div className="full-page talk-page">
                {/*背景照片*/}
                <BgImg src={bgImg} animate={false}/>
                <div className="bg">
                    <div className="count-down-title">婚礼倒计时</div>
                    <div className="count-down-time">{countDown}</div>
                    <img className="function" src={functionImg}/>
                    <img className="hung-up" src={hungUpImg} onClick={()=>this._redirectToDesktop()}/>
                </div>
                <audio className="hidden" id="talk-audio">
                    <source src={userType == 'boy' ? boyMp3 : girlMp3} type="audio/mpeg"/>
                </audio>
            </div>
        )
    }
}